<template>
<div class="menu-pc">
  <div class="logo">
    <img src="../../assets/menuBar/nav_lodo.png" alt="">
  </div>
  <div class="menuNavPc">
    <Menu mode="horizontal" :active-name="activeName" @on-select="menuSelect" ref="Menu">
      <MenuItem name="1">
        首页
      </MenuItem>
      <Submenu name="2-1">
        <template slot="title">
          关于康护
        </template>
        <MenuItem name="2-1">公司简介</MenuItem>
        <MenuItem name="2-2">公司文化</MenuItem>
        <MenuItem name="2-3">公司资质</MenuItem>
      </Submenu>
      <Submenu name="3">
        <template slot="title">
          产品展示
        </template>
        <MenuItem name="3-1">手术部智能管理系统</MenuItem>
        <MenuItem name="3-2">物品管理追溯系统</MenuItem>
        <MenuItem name="3-3">数字化手术室</MenuItem>
      </Submenu>
      <Submenu name="4">
        <template slot="title">
          合作客户
        </template>
        <MenuItem name="4-1">湖北省人民医院</MenuItem>
        <MenuItem name="4-2">三峡大学仁和医院</MenuItem>
        <MenuItem name="4-3">武汉大学中南医院</MenuItem>
        <MenuItem name="4-4">重庆江津区中医院</MenuItem>
        <MenuItem name="4-5">更多</MenuItem>
      </Submenu>
      <Submenu name="5">
        <template slot="title">
          联系我们
        </template>
        <MenuItem name="5-1">联系方式</MenuItem>
        <MenuItem name="5-2">招聘信息</MenuItem>
        <MenuItem name="5-3">在线留言</MenuItem>
      </Submenu>
    </Menu>
  </div>
</div>


</template>

<script>
  import {mapState, mapActions} from "vuex";

  export default {
    name: "menu-pc",
    computed: {
      ...mapState({
        activeName: (state) => state.config.ACTIVE_NAME,
      })
    },
    methods: {
      ...mapActions(['setActiveName',]),

      menuSelect(val) {
        if (val == 1) {
          this.setActiveName(val);
          this.$nextTick(function () {
            this.$refs.Menu.updateActiveName();
            this.$router.push('/');
          });
        } else if (val == '2-1' || val == '2-2' || val == '2-3') {
          this.setActiveName(val);
          this.$nextTick(function () {
            this.$refs.Menu.updateActiveName();
            this.$router.push({name: 'AboutUs', params: {id: val}});
          });
        } else if (val == '3-1') {
          this.setActiveName(val);
          this.$nextTick(function () {
            this.$refs.Menu.updateActiveName();
            this.$router.push({name: 'ProductDisplay', params: {id: val}});
          });
        } else if (val == '3-2') {
          this.setActiveName(val);
          this.$nextTick(function () {
            this.$refs.Menu.updateActiveName();
            this.$router.push({name: 'ProductDisplay', params: {id: val}});
          });
        } else if (val == '3-3') {
          this.setActiveName(val);
          this.$nextTick(function () {
            this.$refs.Menu.updateActiveName();
            this.$router.push({name: 'ProductDisplay', params: {id: val}});
          });
        }else if (val == '4-1'||val == '4-2' || val == '4-3' || val == '4-4'|| val == '4-5') {
          this.setActiveName(val);
          this.$nextTick(function () {
            this.$refs.Menu.updateActiveName();
            this.$router.push({name: 'Partners', params: {id: val}});
          });
        }else if (val == '5-1') {
          this.setActiveName(val);
          this.$nextTick(function () {
            this.$refs.Menu.updateActiveName();
            this.$router.push({name: 'ContactUs', params: {id: val}});
          });
        }else if (val == '5-2') {
          this.setActiveName(val);
          this.$nextTick(function () {
            this.$refs.Menu.updateActiveName();
            this.$router.push({name: 'ContactUs', params: {id: val}});
          });
        }else if (val == '5-3') {
          this.setActiveName(val);
          this.$nextTick(function () {
            this.$refs.Menu.updateActiveName();
            this.$router.push({name: 'ContactUs', params: {id: val}});
          });
        }
      },
    },

    mounted() {
      this.$nextTick(function () {
        this.$refs.Menu.updateActiveName();
      });
    },
  }
</script>


<style scoped lang="less">
.menu-pc{
  height: 120px;
  display: flex;
  padding:0 16px;
  justify-content: space-between;
  align-items: center;
  position: relative;
  .logo{
    width: 218px;
    height: 55px;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .menuNavPc{
    position: absolute;
    right: 0;
    bottom: 0;
  }
}
</style>
<style src="../menuBar.css"></style>

